
<!DOCTYPE HTML>
<html>
<head>
<title>读取并修改元素的属性</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/4_1.css" />
<style>.foreground { z-index: 1; }</style>

</head>
<body>
	<h2>实现多标签页效果</h2>
	<div id="father">
		<ul id="tab">
			<li id="tab1">10元套餐</li>
			<li id="tab2">30元套餐</li>
			<li id="tab3">50元包月</li>
		</ul>
		<div id="container">
			<div id="content1" style="z-index: 1;">
				10元套餐详情：<br />&nbsp;每月套餐内拨打100分钟，超出部分2毛/分钟
			</div>
			<div id="content2">
				30元套餐详情：<br />&nbsp;每月套餐内拨打300分钟，超出部分1.5毛/分钟
			</div>
			<div id="content3">
				50元包月详情：<br />&nbsp;每月无限量随心打
			</div>
		</div>
	</div>
	
	
</body>
<script type="text/javascript">
	var lis=document.querySelectorAll("li");//NodeList可以使用forEach，并且是静态的
	console.log(lis);
	var divs=container.getElementsByTagName("div");
	
	lis.forEach(val=>{
		val.onclick=function(){		
			var num=parseInt(this.innerHTML);
			console.log(num);
			for(var i=0;i<divs.length;i++){
				divs[i].style.zIndex="0";
				if(num==parseInt(divs[i].innerHTML)){
					divs[i].style.zIndex="1";
				}
			}
		}
	})


</script>
</html>
